<template>

     <div class="cost-pop-window"> <!--增加工费弹出框-->
    <div class="title">新增工费111</div>
    <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
     <el-row :gutter="20">
  <el-col :span="10"><el-form-item label="成色" prop="colour">
    <el-select v-model="ruleForm.colour" >
      <el-option label="18K金" value="18K金"></el-option>
      <el-option label="20k金" value="20k金"></el-option>
      <el-option label="18k银" value="18k银"></el-option>
    </el-select>
  </el-form-item></el-col>
  <el-col :span="10">  
     <el-form-item  label="款式" prop="style">
     <el-select v-model="ruleForm.style">
      <el-option label="项链" value="项链"></el-option>
      <el-option label="手镯" value="手镯"></el-option>
      <el-option label="戒指" value="戒指"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
  </el-row>


    <el-row :gutter="20">
  <el-col :span="10"> <el-form-item label-width="130px"
    label="基本工费（元）"
    prop="price"
    :rules="[
      { required: true, message: '不能为空'},
      { type: 'number', message: '必须为数字值'}
    ]">
  <el-input type="age" v-model.number="ruleForm.price" autocomplete="off"></el-input>
  </el-form-item>
  </el-col>
  </el-row>


  <div class="button3">
    <el-button type="text" @click="submitForm('ruleForm')" class="immediately-create">立即添加</el-button>
    <!-- <el-button type="primary" @click="onSubmit">立即创建</el-button> -->
    <el-button class="cancle-button" @click="cancleButton">取消</el-button>
  </div>

    </el-form>

    </div>


</template>

<script>
import { addCost } from '../../http/api'

export default {
    data() {
        return {
ruleForm: {
          colour: '',
          style: '',
          price: '',
        },
        }
    },
    methods: {
    cancleButton(){
     let a=document.getElementsByClassName('cost-pop-window')[0]
     a.style.display='none'       
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    submitForm(formName) {
            this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('请确认是否添加?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {

      addCost(this.ruleForm)
      .then((value)=>{
              console.log('添加成功',value.msg)
        this.cancleButton()
        this.$parent.getCostList()
         this.resetForm('ruleForm')   
        })
        //修改成功后重新刷新当前表格

   
            .catch((err)=>{
              console.log('添加失败',err)
        })

      console.log(this.ruleForm)
              this.$message({
                type: 'success',
                message: '添加成功!',
              }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消添加',
              });
            });

              console.log(this.ruleForm)
              //传给后端的数据（对象）
              let data = new URLSearchParams()
              for (var i in this.ruleForm) {
                data.append(i, this.ruleForm[i])
              }

              // 新增商品编码
              let obj =this.ruleForm
              this.$axios({
                url:'/pdcost/add',
                method:'post',
                data:
                  obj
                
              }).then(res=>{
                console.log(res)
                // this.resetForm(formName)
              }).catch(err=>{
                console.log(err)
              })
            })
            }else {
          console.log('error submit!!')
          return false
        }
      })
    },
    
    
    }
}


</script>

<style>
.cost-pop-window{
    /* border: 1px solid red; */
    display: none;
    width: 60%;
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .05);
    -webkit-box-shadow: #d4d2d2 0px 0px 10px;
    -moz-box-shadow: #d4d2d2 0px 0px 10px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index: 10;
    background-color: whitesmoke; 
}
</style>